<!-- 分散式布局 -->
<template>
  <div>
    <div v-for="(item, index) in menuList" :key="item.menuId" class="marketingplatform">
      <div class="borderleftline" style="border-bottom:1px solid #f5f5f5;line-height: 30px;text-indent: 12px;">
        <span class="titleleft">{{ item.name }}</span>
      </div>
      <ul>
        <li v-for="(f, index) in item.list" :key="f.menuId" @click="gotoRouteHandle(f)">
          <img :src="f.icon ? f.icon:'https://oss.qlan99.com/20200525/5a16520de701452d885cdcbfd2508e50.png'" :alt="f.name" />
          <div class="software_introduce_title">
            <p>{{ f.name }}</p>
      <!--      <p>{{ f.menuDesc }}</p> -->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: undefined,
      menuList: []
    };
  },
  created() {

  },
  methods: {
    init(id) {
      console.log(id);
      this.id = id;
      this.$nextTick(() => {
        //查询下级菜单
        const menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]');
        this.menuList = menuList.filter(item => item.type == 0 && item.parenttopId == id);
        console.log(this.menuList);
      });
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle(menu) {
      console.log(menu);
      const dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]');
      let route = dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId);
      console.log(menu);
      if (route.length >= 1) {
        this.$router.push({ name: route[0].name });
      }
    }
  }
};
</script>

<style>
.borderleftline .titleleft {
  border-left: 3px solid #17b3a3;
  padding-left: 8px;
}
.software_introduce_title {
  float: left;
  margin-top: 21px;
  width: 72%;
}
.software_introduce_title p:first-child {
  font-weight: 600;
  font-size: 14px;
  color: #000;
}
.software_introduce_title p:nth-child(2) {
  color: #999;
  font-size: 14px;
}
.software_introduce_title p{
    margin: 0;
    line-height: 20px;
}
.marketingplatform ul {
    overflow: hidden;
    margin-top: 21px;
    list-style: none;
}
.marketingplatform ul li {
    display: inline-block;
    margin-left: 15px;
    background: #f5f5f5;
    margin-bottom: 15px;
    border-radius: 8px;
    width: 18.6%;
    min-width: 276px;
    cursor: pointer;
}
.marketingplatform ul li img {
    float: left;
    padding-bottom: 22px;
    padding-top: 18px;
    padding-right: 15px;
    width: 60px;
    margin-left: 17px;
}
.marketingplatform a{
    text-decoration: none;
}
</style>
